<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="common :: header"/>
<body>
<div class="page layout-row">
	<div class="card layout-center">
		<div class="card-header">角色列表</div>
		<div class="card-body">
			<div id="table"></div>
			<div id="toolbar" style="display: none">
				<a shiro:hasPermission="system:role:add" href="#" onclick="add()" class="easyui-linkbutton"
				   data-options="iconCls:'icon-add',plain:true">增加</a>
				<a shiro:hasPermission="system:role:edit" href="#" onclick="edit()" class="easyui-linkbutton"
				   data-options="iconCls:'icon-edit',plain:true">修改</a>
				<a shiro:hasPermission="system:role:delete" href="#" onclick="remove()" class="easyui-linkbutton"
				   data-options="iconCls:'icon-cancel',plain:true">删除</a>
				<input id="btnShowDisabled">
			</div>
		</div>
	</div>
	<div class="card layout-right">
		<div class="card-header">
			权限树
			<i class="layui-icon layui-icon-up icon2" style="display: none" lay-tips="展开" lay-offset="-15" id="btnExpand"></i>
			<i class="layui-icon layui-icon-down icon2" lay-tips="折叠" lay-offset="-15" id="btnCollapse"></i>
			<i shiro:hasPermission="system:role:auth" class="layui-icon layui-icon-ok-circle" lay-tips="保存" lay-offset="5" onclick="saveRoleMenus()"></i>
		</div>
		<div class="card-body">
			<div id="tree"></div>
		</div>
	</div>
</div>
<script>
    $(function () {
        $('#table').datagrid({
            url: '/system/role/list',
            queryParams: {status: 0},
			toolbar: '#toolbar',
            fit:true,
            fitColumns: true,
            singleSelect: true,//单选模式
            idField: 'roleId',
            sortName: 'roleSort',
            pagination: true,
            pageSize: 20, //每一页多少条数据
            pageList: [10, 20, 30, 50, 100],  //可以选择的每页的大小的combobox
            columns: [ [
                { field: 'ck', checkbox: true },
                { field: 'roleName', title: '角色名称', width: 80 },
                { field: 'roleKey', title: '角色标识', width: 80 },
                { field: 'roleSort', title: '角色顺序', width: 50 },
                { field: 'remark', title: '说明', width: 80 },
                { field: 'status', title: '状态',align:'center', width: 50,formatter:statusFormatter}
            ] ],
            onLoadSuccess: function(){
                $('#table').datagrid('selectRow',0);
            },
            onSelect: function(index, row){
                $("#tree").tree({url:"/system/menu/roleMenuTree?roleId="+row.roleId});
            }
        });
        $("#tree").tree({
			title: '角色权限',
            fit: true,
			checkbox: true,
            cache: false,
			onLoadSuccess: function(){
				$('#btnExpand').hide();
				$('#btnCollapse').show();
			}
        })
    });

    $('#btnExpand').click(function() {
        $('#tree').tree('expandAll');
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function() {
        $('#tree').tree('collapseAll');
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnShowDisabled').checkbox({
        label:'显示停用',
        onChange:function (checked) {
            var params = checked ? {} : {status: 0};
            dm.search('table', params);
        }
    });

    function add(){
        dm.openDialog('增加角色', '/system/role/add', 500, 380);
    }

    function edit() {
        dm.getRow('table', function(row) {
            dm.openDialog('修改角色','/system/role/edit/'+row.roleId, 500, 430);
        })
    }

    function remove() {
        dm.getRow('table',function(row) {
            dm.confirm('删除操作不可恢复。您确定要删除该角色吗？', function () {
                dm.post('/system/role/delete/' + row.roleId, {}, function() {
                    dm.search('table');
                })
            })
        })
    }

    function saveRoleMenus() {
		dm.getRow('table', function (row) {
			if (row.roleId == 1) {
				dm.msg("管理员不需要分配权限！");
			} else {
				var nodes1 = $('#tree').tree('getChecked');
				var nodes2 = $('#tree').tree('getChecked','indeterminate'); //获取半选父节点
				var nodes = nodes1.concat(nodes2);
				var ids = $.map(nodes, row => row.id).join();
				dm.post('/system/role/saveRoleMenus',{roleId:row.roleId, menuIds: ids})
			}
        })
    }

</script>
</body>
</html>
